<template>
  <div v-loading="loading" element-loading-text="拼命加载中..."
  >
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>内部用户管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>
    &nbsp;&nbsp;&nbsp;
    <span class="toubuwenzi">账号:</span>&nbsp;&nbsp;
    <el-input style="width: 19%;height: 32px" v-model="haha.username" placeholder="请输入账号模糊查询"></el-input> &nbsp;&nbsp;
    <span class="toubuwenzi">性别:</span>&nbsp;&nbsp;
    <el-select style="height: 32px; width: 19%;" v-model="haha.gender" placeholder="请选择性别">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>&nbsp;&nbsp;
    <span class="toubuwenzi">真实姓名:</span>&nbsp;&nbsp;
    <el-input style="width: 19%;height: 32px" v-model="haha.realName" placeholder="请输入真实姓名"></el-input>&nbsp;&nbsp;
    <span class="toubuwenzi">手机号码:</span>&nbsp;&nbsp;
    <el-input style="width: 19%;height: 32px" v-model="haha.phone" placeholder="请输入手机号码"></el-input>
    <div id="toubu1">
      <span class="toubuwenzi1">用户状态:</span>
      <el-select style="height: 32px; width: 19%;" v-model="haha.state" placeholder="请选择状态">
        <el-option
            v-for="i in dongjie"
            :key="i.values"
            :label="i.label"
            :value="i.values">
        </el-option>
      </el-select>
      <el-row id="cha">
        <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">添加用户</el-button>
        <el-button type="primary" icon="el-icon-search" @click="selectUserName()">查询</el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="reset()">重置</el-button>


      </el-row>

      <el-row id="chaa">
        <div style="display: flex">
          <div style=" padding-right: 20px">
<!--            <el-button type="primary" icon="el-icon-delete" @click="listStateId()">回收站</el-button>

            <el-dialog title="回收站" :visible.sync="dialogTableVisible">
              <el-table :data="userArr1">
                <el-table-column property="username" width="150"></el-table-column>
                <el-table-column property="unit" width="200"></el-table-column>
                <el-table-column property="regionName" width="150"></el-table-column>
                <el-table-column>
                  <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEdit(scope.row)">恢复用户
                    </el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="userDeleteConfirm(scope.row)">彻底删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-dialog>-->

          </div>

          <!--导出-->
          <div>
            <download-excel
                class="export-excel-wrapper"
                :data="userArr"
                :fields="json_fields"
                type="xls"
                worksheet="My Worksheet"
                name="用户信息"
            >

              <el-button type="primary" icon="el-icon-download">导出</el-button>
            </download-excel>
          </div>
        </div>

      </el-row>
    </div>

    <div
        style=":border:1px solid #409eff;background-color: rgba(64,158,255,0.1);margin:20px 10px;padding:12px 30px;color:#606266;border-radius: 5px;">
      已选择<a style="text-decoration: none;color:#409eff" href="javascript:void(0)">{{ n }}</a>项
      <span style=" font-size: 15px; margin-left: 30px">
                    <a style="text-decoration: none;color:#409eff" href="javascript:void(0)" @click="clear()">清空</a>
            </span>
    </div>

    <template>
      <el-table
          ref="multipleTable"
          :data="userArr"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="Addnumbers"
      >

        <el-table-column
            type="selection"
            width="80">
        </el-table-column>
        <el-table-column
            prop="username"
            label="用户账号"
            width="200">
        </el-table-column>
        <el-table-column
            prop="realName"
            label="真实姓名"
            width="200">
        </el-table-column>
        <el-table-column
            prop="avatar"
            label="头像"
            width="150">
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        </el-table-column>
        <el-table-column
            prop="phone"
            label="手机号" width="250"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="internalUnitName"
            label="单位名称"
            width="300"
            show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
            prop="state"
            label="状态"
            show-overflow-tooltip>
        </el-table-column>

        <el-table-column
            fixed="right"
            label="操作"
            width="150">
          <template slot-scope="scope">
            <el-dropdown>
  <span class="el-dropdown-link">
    更多<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button type="text" @click="openDeleteConfirm(scope.row)">删除</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button type="text" @click="update(scope.row)">编辑</el-button>
                </el-dropdown-item>


                <el-dropdown-item v-if="scope.row.state == '冻结'">
                  <el-button type="text" @click="updateStatus(scope.row)">正常</el-button>
                </el-dropdown-item>
                <el-dropdown-item v-if="scope.row.state == '正常'">
                  <el-button type="text" @click="updateStatus(scope.row)">冻结</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </template>

        </el-table-column>
      </el-table>
      <div>
<!--        <el-dialog title="详情" :visible.sync="particulars">
          <hr>
          <el-form :model="selectUserParticulars">

            <el-form-item style="margin-top: 20px" label="用户账号" :label-width="formLabelWidth">
              <el-input style="width: 85%;height: 32px;" v-model="selectUserParticulars.username"
                        :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="单位名称:" :label-width="formLabelWidth">
              <el-input style="width: 85%;height: 32px;" v-model="selectUserParticulars.unit"></el-input>
            </el-form-item>
            <el-form-item label="地区名称:" :label-width="formLabelWidth">
              &lt;!&ndash;              <el-input style="width: 85%;height: 32px;" v-model="selectUserParticulars.name"></el-input>&ndash;&gt;
              <el-select style="height: 32px; width: 85%;" placeholder="请选择地区" v-model="selectUserParticulars.UserName">
                <el-option
                    v-for="item in userListOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="角色选择:" :label-width="formLabelWidth">
              <el-select style="height: 32px; width: 85%;" placeholder="请选择角色" v-model="user.roleId">
                <el-option
                    v-for="item in RoleListOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="手机号码:" :label-width="formLabelWidth">
              <el-input style="width: 85%;height: 32px;" v-model="selectUserParticulars.phone"></el-input>
            </el-form-item>
            <el-form-item label="角色分配:" :label-width="formLabelWidth">
              <el-input
                  style="width: 85%;height: 32px"
                  placeholder="请输入内容"
                  v-model="selectUserParticulars.roleName"
                  :disabled="true">
              </el-input>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="particulars=false">关 闭</el-button>
            <el-button type="primary" @click="updatesUserRole()">确 定</el-button>
          </div>
        </el-dialog>-->

        <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
          <hr>
          <el-form :model="user">
            <div style="margin-bottom: 150px">
              <el-form-item label="账号:" :label-width="formLabelWidth">
                <el-input type="username" v-model="user.username" autocomplete="off" placeholder="请输入账号"></el-input>
              </el-form-item>
              <el-form-item label="密码:" :label-width="formLabelWidth">
                <el-input type="password" v-model="user.password" autocomplete="off" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item label="姓名:" :label-width="formLabelWidth">
                <el-input type="realName" v-model="user.realName" autocomplete="off" placeholder="请输入姓名"></el-input>
              </el-form-item>


              <el-form-item label="单位:" :label-width="formLabelWidth">
                <el-select style="height: 32px; width: 85%;" placeholder="请选择单位" v-model="user.internalUnitId">
                  <el-option
                      v-for="item1 in unitOptions"
                      :key="item1.id"
                      :label="item1.name"
                      :value="item1.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="角色选择:" :label-width="formLabelWidth1">
                <el-select style="height: 32px; width: 85%;" placeholder="请选择角色" v-model="user.roleId">
                  <el-option
                      v-for="item in RoleListOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="地区:" :label-width="formLabelWidth1">
                <el-select style="height: 32px; width: 85%;" placeholder="请选择角色" v-model="user.locationId">
                  <el-option
                      v-for="item in LoListOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="手机号码:" :label-width="formLabelWidth">
                <el-input type="phone" v-model="user.phone" autocomplete="off" placeholder="请输入手机号码"></el-input>
              </el-form-item>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">关 闭</el-button>
            <el-button type="primary" @click="addNew()">添 加</el-button>
          </div>
        </el-dialog>


        <el-dialog title="编辑用户" :visible.sync="FormVisible">
          <hr>
          <el-form :model="ruleForm">
            <div style="margin-bottom: 150px">
              <el-form-item label="账号:" :label-width="formLabelWidth">
                <el-input type="username" v-model="ruleForm.username" autocomplete="off" placeholder="请输入账号"
                          :disabled="true"></el-input>
              </el-form-item>

              <el-form-item label="姓名:" :label-width="formLabelWidth">
                <el-input type="realName" v-model="ruleForm.realName" autocomplete="off" placeholder="请输入姓名"></el-input>
              </el-form-item>
              <el-form-item label="单位:" :label-width="formLabelWidth">
                <el-select style="height: 32px; width: 85%;" placeholder="请选择单位" v-model="ruleForm.internalUnitId">
                  <el-option
                      v-for="item1 in unitOptions"
                      :key="item1.id"
                      :label="item1.name"
                      :value="item1.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="角色选择:" :label-width="formLabelWidth1">
                <el-select style="height: 32px; width: 85%;" placeholder="请选择角色" v-model="ruleForm.roleId">
                  <el-option
                      v-for="item in RoleListOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="手机号码:" :label-width="formLabelWidth">
                <el-input type="phone" v-model="ruleForm.phone" autocomplete="off" placeholder="请输入手机号码"></el-input>
              </el-form-item>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="FormVisible=false">关 闭</el-button>
            <el-button type="primary" @click="openUpdateConfirm()">修 改</el-button>
          </div>
        </el-dialog>





        <div style="margin-top: 20px">

        </div>

      </div>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm:{
      },
      unitOptions:[],
      json_fields: {
        "ID": 'id',
        "用户账号": 'username',
        "单位名称": 'unit',
        "所属地区": 'regionName',
        "手机号": 'phone',
        "状态": 'state',
      },
      user:{
        username:'',
        password:'',
        realName:'',
        internalUnitId:'',
        phone:'',
      },
      selectUserParticulars:{},
      role: {},
      userListOptions:[],
      RoleListOptions: [],
      dialogTableVisible: false,
      title: "体育局用户表格",

      n: 0,
      particulars: false,
      table: false,
      userArr: [],
      userArr1: [],
      form: {},
      password: '',
      formLabelWidth: '120px',
      formLabelWidth1:'120px',
      dialogFormVisible: false,
      FormVisible : false,
      haha: [],
      input: '',
      options: [{
        value: '男',
        label: '男'
      }, {
        value: '女',
        label: '女'
      }],
      value: '',
      dongjie: [{
        values: 1,
        label: '正常'
      }, {
        values: 2,
        label: '冻结'
      }],
      multipleSelection: [],

      loading: true,
      LoListOptions:[]
    }
  },




  methods: {
    update(row){
      this.ruleForm.id=row.id
      this.ruleForm.username=row.username
      this.FormVisible = true
    },
    //状态
    updateStatus(states) {
      let url = 'http://localhost:8080/reportingusers/updateStatus';
      let formData = this.qs.stringify(states);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, formData).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message({
            message: "修改状态成功！",
            type: "success"
          });
          this.loadReportingUserList();
        } else if (responseBody.state == 40900) {
          this.$message.error(responseBody.message);
        } else {
          this.$message.error(responseBody.message);
        }
      });
    },

    addNew(){
      let url = 'http://localhost:8080/usermanage/add-new';
      console.log('url = '+url);
      console.log('user = '+this.user)
      let formData = this.qs.stringify(this.user);
      console.log('url = '+url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url,formData).then(
          (response)=>{
            if(response.data.state==20000){
              this.$message.success("添加成功")
              this.loadReportingUserList();
              this.dialogFormVisible = false;
            }else {
              this.$message.error(response.data.message)
            }

          }
      )


    },






    //列表删除用户
    openDeleteConfirm(user) {
      let message = '您确定要删除【' + user.username + '】用户吗？';
      this.$confirm(message, '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteStateId(user);
      }).catch(() => {
      });
    },
    deleteStateId(user) {
      let url = 'http://localhost:8080/usermanage/'+user.id+'/delete'
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message.success("删除成功")
          this.loadReportingUserList();
          /*this.$notify({
            title: '成功',
            message: "删除用户成功，可在回收站恢复此用户！",
            type: 'success'
          });*/

        }else if (responseBody.state == 50100){
          this.$message.error(response.data.message)
        }
      })
    },





    /*listStateId() {
      this.dialogTableVisible = true
      console.log('mounted')
      console.log('loadreportingusersList');
      let url = 'http://localhost:8080/reportingusers/listStateId';
      console.log('url = ' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.userArr1 = responseBody.data;
      })
    },
    userDeleteConfirm(user) {
      let message = '此操作将永久删除【' + user.username + '】用户，是否继续？';
      this.$confirm(message, '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(user);
      }).catch(() => {
      });
    },
    //恢复用户
    handleEdit(state) {
      let url = 'http://localhost:8080/reportingusers/updateStateIda/' + state.id;
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$notify({
            title: '成功',
            message: "用户恢复成功！",
            type: 'success'
          });
          this.listStateId();
          this.loadReportingUserList();
        }
      })
    },*/





    //编辑用户
    openUpdateConfirm(){
      let url = 'http://localhost:8080/usermanage/update';
      console.log(url);
      let formData = this.qs.stringify(this.ruleForm);
      this.axios.create({'headers':{'Authorization':localStorage.getItem('jwt')}})
          .post(url,formData).then((response) => {
        let responseBody = response.data;
        if(responseBody.state == 20000){
          this.$message({message: '修改成功！',
            type: 'success'
          });
          this.loadReportingUserList();
          this.FormVisible = false
          this.ruleForm=[]
        }else {
          this.$message.error(response.data.message)
        }
      })
    },





    //已选择项
    Addnumbers(selections) {
      this.n = selections.length
    },
    //清空
    clear() {
      this.$refs.multipleTable.clearSelection();
    },
    //重置
    reset() {
      this.haha = [];
    },

    selectUserName() {
      let url = 'http://localhost:8080/usermanage/dimList';
      let haha = this.qs.stringify(this.haha);
      console.log(this.haha)
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, haha).then((response) => {
        let responseBody = response.data;
        console.log("responseBody:"+responseBody)
        console.log(haha)
        for (let i = 0; i < responseBody.data.length; i++) {

          if (responseBody.data[i].state == 1) {
            responseBody.data[i].state = '正常';

          } else if (responseBody.data[i].state == 2) {
            responseBody.data[i].state = '冻结';

          }

        }

        this.userArr = responseBody.data;
        this.haha = [];

      })
    },







    //查询角色列表
    loadRoleList() {
      console.log('loadRoleList');
      let url = 'http://localhost:8080/roles';
      console.log('url = ' + url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.RoleListOptions = responseBody.data;
      });
    },
    loadUnitList(){
      let url1 = 'http://localhost:8080/units';
      console.log('url = ' + url1);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url1).then((response) => {
        let responseBody = response.data;
        this.unitOptions = responseBody.data;
        console.log(this.unitOptions)
      });
    },
    // 列表查询
    loadReportingUserList() {

      console.log('mounted')
      console.log('loadreportingusersList');
      let url = 'http://localhost:8080/usermanage/list';
      console.log('url = ' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let r = response.data.data;
        for (let i = 0; i < r.length; i++) {

          if (r[i].state == 1) {
            r[i].state = '正常';

          } else if (r[i].state == 2) {
            r[i].state = '冻结';

          }
        }
        this.userArr = r;
        this.loading = false;
      })

    },
    LoSelect(){
      let url='http://localhost:8080/users/select/region';
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        this.LoListOptions=response.data.data;
      })

    }


  },
  mounted() { //挂载
    console.log('mounted')
    this.loadUnitList();
    this.loadReportingUserList();
    this.loadRoleList();
    this.LoSelect();

  }
}
</script>


<style>
.toubuwenzi {
  /*padding-left: 16px;*/
}

#toubu1 {
  padding-top: 35px;
  margin-right: 10px;
  /*padding-left: 20px;*/
  /*display: inline-block;*/
}

#cha {
  float: right;
  left: -823px;
}

#chaa {
  /*float: left;*/
  margin-top: 35px;
  /*padding-bottom: 100px;*/
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

#chouti {
  width: 800px;
  padding-top: 110px;
  position: absolute;
  margin-top: 50px;
  left: 50%;
  top: 15%;
  transform: translate(-50%, -50%);
}
</style>